﻿<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Instituciones</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <!-- FontAwesome - http://fortawesome.github.io/Font-Awesome/ -->
    <link rel="stylesheet" href="css/font-awesome.min.css" />
    <!-- jQueryMobileCSS - original without styling -->
    <link rel="stylesheet" href="css/jquerymobile.css" />
    <!-- nativeDroid core CSS -->
    <link rel="stylesheet" href="css/jquerymobile.nativedroid.css" />
    <!-- nativeDroid: Light/Dark -->
    <link rel="stylesheet" href="css/jquerymobile.nativedroid.light.css" id='jQMnDTheme' />
    <!-- nativeDroid: Color Schemes -->
    <link rel="stylesheet" href="css/jquerymobile.nativedroid.color.purple.css" id='jQMnDColor' />
    <style type="text/css">
        .parra_texto {
            font-weight: 300;
            margin: 7px 0;
            white-space: normal;
            display: block;
            overflow: hidden;
            text-overflow: ellipsis;
            min-height: 59px;
            width: 100%;
        }

        .listdo_iconos {
            padding-bottom: 0px;
            border: 0 !important;
            width: 200px;
        }

        .imagen_icono {
            /*float:left !important;        */
        }

        .ui-btn-inner {
            white-space: normal !important;
        }

        .ui-body-b .ui-collapsible-heading-toggle {
            border-bottom-width: 0px !important;
        }

        .ui-collapsible-heading-toggle .ui-btn-text {
            font-size: 16px !important;
        }

        #map-canvas {
            position: absolute;
            height: 75%;
            width: 100%;
            background-color: White;
        }

        .styled-select {
            width: 90%;
            height: 34px;
            overflow: hidden;
            background: url(imagenes/flecha_abajo.png) no-repeat right #ddd;
            padding: 3px;
            margin: 5px;
            -webkit-border-radius: 4px;
            -moz-border-radius: 4px;
            border-radius: 4px;
            -webkit-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
            -moz-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
            box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
            color: #888;
            border: none;
            outline: none;
            display: inline-block;
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            cursor: pointer;
        }
    </style>
    <!-- jQuery / jQueryMobile Scripts -->
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
    <script src="js/funciones.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <script>

        $(document).ready(function () {
            $('.ui-icon.ui-icon-arrow-d.ui-icon-shadow').hide();
        });

        var global = 0;
        var map;
        var markers = [];
        //Crea la ventana de información y limpia la propiedad content
        var infowindow = new google.maps.InfoWindow({
            content: ""
        })

        function initialize() {
            var mapOptions = {
                zoom: 15,
                center: new google.maps.LatLng(5.067711, -75.518024),
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };

            map = new google.maps.Map(document.getElementById('map-canvas'),
            mapOptions);
            verDatos();
        }

        google.maps.event.addDomListener(window, 'load', crearMapa);

        function verDatos(Departamento, Nivel) {
            var url = "http://servicedatosabiertoscolombia.cloudapp.net/v1/Ministerio_de_educacion_nacional/sedeseducativas?$filter=nombre_departamento='" + Departamento + "'&$format=json";
            $.ajax({
                url: url,
                type: 'GET',
                dataType: 'jsonp',
                crossDomain: true,
                success: function (data) {
                    $.each(data, function (i, field) {
                        var cant = field.length;
                        $.each(field, function (x, item) {
                            if (omitirAcentos(field[x].niveles).toString().indexOf(Nivel) != -1) {
                                PosicionGoogle(field[x].nombre_departamento, field[x].nombre_municipio, field[x].nombre_establecimiento, field[x].direccion, field[x].telefono, field[x].niveles);
                            }
                        });
                    });
                },
                error: function (x, y, z) {

                }
            });
        }

        function crearMapa() {
            markers = [];
            var Depto = document.getElementById("departamentos_combo").value;
            var Nivel = document.getElementById("niveles_combo").value;
            $.getJSON('http://maps.googleapis.com/maps/api/geocode/json?address=Colombia,' + Depto + '&sensor=true', function (data) {
                var mapOptions = {
                    zoom: 7,
                    center: new google.maps.LatLng(data.results[0].geometry.location.lat, data.results[0].geometry.location.lng),
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };

                map = new google.maps.Map(document.getElementById('map-canvas'),
            mapOptions);
                verDatos(Depto, Nivel);
            });
        }

        function PosicionGoogle(departamento, ciudad, nombre, direccion, telefono, niveles) {
            Depto = document.getElementById("departamentos_combo").value;
            $.getJSON('http://maps.googleapis.com/maps/api/geocode/json?address=Colombia,' + Depto + ',' + ciudad + '&sensor=true', function (data) {
                marker = new google.maps.Marker({
                    position: new google.maps.LatLng(data.results[0].geometry.location.lat, data.results[0].geometry.location.lng),
                    map: map
                });
                marker.Message = "<strong>Nombre de la institución</strong>: " + nombre + "<br />";
                marker.Message += "<strong>Dirección</strong>: " + direccion + "<br />";
                marker.Message += "<strong>Telefono</strong>: " + telefono + "<br />";
                marker.Message += "<strong>Niveles que ofrece</strong>: " + niveles + "<br />";
                google.maps.event.addListener(marker, 'click', function () {
                    infowindow.setContent(this.Message)
                    infowindow.open(map, this);
                });
                markers.push(marker);
            });
        }

        //Eliminar todos los markers del vector para limpiar el mapa
        function borrarMarkers() {

            //                alert(markers.length);
            //                for (i in markers) {
            //                
            //                    markers[i].setMap(null);
            //                }
            //                markers.length = 0;
            var mapOptions = {
                zoom: 15,
                center: new google.maps.LatLng(5.067711, -75.518024),
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };

            map = new google.maps.Map(document.getElementById('map-canvas'),
            mapOptions);
        }

        function omitirAcentos(text) {
            var acentos = "ÃÀÁÄÂÈÉËÊÌÍÏÎÒÓÖÔÙÚÜÛãàáäâèéëêìíïîòóöôùúüûÑñÇç";
            var original = "AAAAAEEEEIIIIOOOOUUUUaaaaaeeeeiiiioooouuuunncc";
            for (var i = 0; i < acentos.length; i++) {
                if (text != null) {
                    text = text.replace(acentos.charAt(i), original.charAt(i));
                }
            }
            return text.toLowerCase();
        }
    </script>
</head>
<body>
    <div data-role="page" data-theme='b'>
        <div data-role="header" data-position="fixed" data-tap-toggle="false" data-theme='b'>
            <a href="index.html" data-ajax="false"><i class='icon-ellipsis-vertical'></i></a>
            <h1>Centros educativos </h1>
        </div>
        <div data-role="content">
            <ul data-role="listview" data-divider-theme="b" data-icon="false" data-filter="false"
                data-filter-theme="b" class='showastabs'>
                <li data-role="list-divider">Prescolar, primaria, secundaria y media</li>
            </ul>
            <div class='message info'>
                <i class='icon-info-sign'></i>
                <p>
                    En esta sección podrá consultar el listado de centros educativos para preescolar, primaria, secundaria y media
                </p>
            </div>
            <div class="block-title">
                <strong><span style="font-size: 18px !important; color: Black; font-weight: 400;">Seleccione
                                                    el departamento que desea consultar:</span> </strong>
                <br />
                <select id="departamentos_combo" class="styled-select" onchange="crearMapa()">
                    <option value="Amazonas">Amazonas</option>
                    <option value="Antioquia">Antioquia</option>
                    <option value="Arauca">Arauca</option>
                    <option value="Atlantico">Atlántico</option>
                    <option value="Bolivar">Bolívar</option>
                    <option value="Boyacá">Boyacá</option>
                    <option value="Caldas">Caldas</option>
                    <option value="Caqueta">Caquetá</option>
                    <option value="Casanare">Casanare</option>
                    <option value="Cauca">Cauca</option>
                    <option value="Cesar">Cesar</option>
                    <option value="Choco">Chocó</option>
                    <option value="Cordoba">Córdoba</option>
                    <option value="Cundinamarca">Cundinamarca</option>
                    <option value="Guainia">Guainía</option>
                    <option value="Guaviare">Guaviare</option>
                    <option value="Huila">Huila</option>
                    <option value="Guajira">La Guajira</option>
                    <option value="Magdalena">Magdalena</option>
                    <option value="Meta">Meta</option>
                    <option value="Nariño">Nariño</option>
                    <option value="Norte de Santander">Norte de Santander</option>
                    <option value="Putumayo">Putumayo</option>
                    <option value="Quindio">Quindío</option>
                    <option value="Risaralda">Risaralda</option>
                    <option value="San Andres">San Andrés y Providencia</option>
                    <option value="Santander">Santander</option>
                    <option value="Sucre">Sucre</option>
                    <option value="Tolima">Tolima</option>
                    <option value="Valle">Valle del Cauca</option>
                    <option value="Vaupes">Vaupés</option>
                    <option value="Vichada">Vichada</option>
                </select>
                <br />
                <strong><span style="font-size: 18px !important; color: Black; font-weight: 400;">Seleccione
                                                    el nivel académico:</span> </strong>
                <br />
                <select id="niveles_combo" class="styled-select" onchange="crearMapa()">
                    <option value="preescolar">Preescolar</option>
                    <option value="primaria">Básica primaria</option>
                    <option value="secundaria">Básica secundaria</option>
                    <option value="media">Media</option>
                </select>
            </div>
            <div id="map-canvas">
            </div>
        </div>
        <div data-position="fixed" data-tap-toggle="false" data-role="footer" data-tap-toggle="false" data-theme='b'>
            <div data-role="navbar">
                <ul>
                    <li><a href="https://www.facebook.com/gobiernoenlinea" target="_blank" data-icon="facebook"></a></li>
                    <li><a href="https://twitter.com/Gobiernoenlinea" target="_blank" data-icon="twitter"></a></li>
                    <li><a href="http://www.youtube.com/user/Vivegobiernoenlinea" target="_blank" data-icon="youtube"></a></li>
                </ul>
            </div>
        </div>
    </div>
</body>
</html>
